<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">收藏单词</span>
    </van-col>
  </van-row>
  <div id="app">
    <van-nav-bar title="单词收藏" />
    <van-list>
      <van-cell v-for="word in words" :key="word.id" :title="word.word" :label="word.exampleSentence1" @click="showWordDetail(word)">
        <template #title>
          <div class="word-item">
            <span class="word-text">{{ word.word }}</span>
            <span class="word-chinese">（{{ word.chinese }}）</span>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { get } from "../../util/request.js";
import { onMounted, ref } from "vue";
import { showToast } from "vant";

const words = ref([]);

onMounted(() => {
  get("home/wrong-questions/collectionWordList")
      .then((response) => {
        words.value = response.data;
      })
      .catch((error) => {
        console.error("Error fetching words:", error);
        showToast("数据加载失败，请稍后再试");
      });
});

const showWordDetail = (word) => {
  // 显示单词详情
  showToast(`单词: ${word.word}\n翻译: ${word.chinese}\n例句: ${word.exampleSentence1}`);
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.word-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
}

.word-text {
  font-size: 1.1rem;
  font-weight: bold;
}

.word-chinese {
  font-size: 0.8rem;
  color: #999;
}
</style>